<template>
    <div>
        <div >
            <el-image style="width: 100%; height: 600px" :src="url"></el-image>
        </div>
        <div class="title">
                        <span>扶农政策</span>
                        <span class="position">您现在的位置:扶农政策</span>
                    </div>
                    <div class="search">
                        <el-button type="primary" size="mini" icon="el-icon-search">搜索</el-button>
                        <input type="text" style="height:20px; text-align:center"  placeholder="标题">标题
                    </div>
                    <ul class="mod-item">
                        <li v-for="(item,index) in list_fupin" :key="index" @click="$router.push('/AlleviationInfo/' +item.id)">
                            <img :src="item.cover" alt="">
                            <span >{{item.content}}</span>
                        </li>
                    </ul>
                    <div class="block">
                    <el-pagination
                        style="text-align:center;margin:30px auto"
                        @current-change="current"
                        layout="prev, pager, next"
                        :page-size="4"
                        background
                        :total="total"
                        >
                    </el-pagination>
                    </div>
    </div>
</template>

<script>
export default {
    data() {
       return{
        total:50,
        activeName: 'first',
        list_fupin:[],
        pageNum:1,
        pageSize:4,
        url: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.377U3eDEW1bw8F83zrtqygHaE7?w=270&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7.jpeg'
       } 
    },
    methods:{
        handleClick(tab, event) {
            window.console.log(tab, event);
        },
        async getFupin(pageNum,pageSize){
            let {data:res} = await this.$axios.get('/alleviation/getlist',{
                params:{
                    pageNum,
                    pageSize
                }
            })
           
            this.total = res.data.total
            this.list_fupin = res.data.list
        },
        current(e) {
            this.pageNum = e;
            this.getFupin(e, this.pageSize);
        },
    },
    created(){
        this.getFupin(this.pageNum,this.pageSize)
    }
}
</script>

<style scoped lang="scss">

.title{
    width: 80%;
    height: 30px;
    line-height: 30px;
    border-left: 5px #666 solid;
    margin: 10px auto;
    padding-left: 20px;
    .position{
        display: inline-block;
        margin-left: 20px;
        font-size: 10px;
        color: #999;
    }
}
.search{
    width: 80%;
    height: 30px;
    margin: 10px auto;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}
.mod-item{
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li{
        width: 49%;
        height: 130px;
        border: 1px solid #999;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        border-radius: 5px;
        box-shadow: 10px 10px 5px #999;
        img{
            width: 100px;
            height: 100px;
        }
        span{
            display: inline-block;
            margin: 0 auto;
            position: relative;
            top:-50px;
            left: 80px;
            font-size: 20px;
            color: rgb(51, 159, 201);

        }
    }
}
</style>



